<template>
  <div>
    <scroller ref="scrfor" :on-refresh="reffor" :on-infinite="inffor">
      <div style="margin-left: 10px;margin-right: 10px;">
        <h2 align="center" style="margin-top: 10%;">科目三灯光考试练习</h2>
        <div align="center" style="margin-top: 15%">
          <el-button ref="all_btn" :loading="all_btn_loading" :disabled="all_btn_disabled" class="custom-btn"
                     type="primary" @click="moni('all')">全量模拟
          </el-button>
        </div>
        <div align="center" style="margin-top: 10%;margin-bottom: 15%">
          <el-button :loading="part_btn_loading" :disabled="part_btn_disabled" ref="part_btn" class="custom-btn"
                     type="primary" @click="moni('partitial')">考试模拟
          </el-button>
        </div>

        <div id="audioBox" style="text-align: center">
        </div>

        <el-divider>知识点</el-divider>
        <div style="font-size: smaller;line-height: 1.5rem;color: blue;margin-bottom: 1rem;text-indent: 2em;">
          注：1、9、10顺序固定；2-8顺序随机抽取，3每次5个里抽一个，7每次两个里抽一个（以下题型适用于上海光明驾校考场，如信息不准确请联系 kdyzm@foxmail.com 修改）
        </div>

        <el-collapse accordion>
          <el-collapse-item title="0. 请检查灯光" name="0">
            <div class="tip-text">远近灯光交替2次</div>
          </el-collapse-item>
          <el-collapse-item title="1. 请开启前照灯" name="1">
            <div class="tip-text">开启近光灯</div>
          </el-collapse-item>
          <el-collapse-item title="2. 同方向近距离跟车行驶" name="2">
            <div class="tip-text">近光灯</div>
          </el-collapse-item>
          <el-collapse-item title="3. 通过急弯" name="3">
            <div class="tip-text">远近灯光交替2次</div>
          </el-collapse-item>
          <el-collapse-item title="3. 通过坡路" name="4">
            <div class="tip-text">远近灯光交替2次</div>
          </el-collapse-item>
          <el-collapse-item title="3. 通过拱桥" name="5">
            <div class="tip-text">远近灯光交替2次</div>
          </el-collapse-item>
          <el-collapse-item title="3. 通过人行横道线" name="6">
            <div class="tip-text">远近灯光交替2次</div>
          </el-collapse-item>
          <el-collapse-item title="3. 通过没有交通信号灯控制的路口" name="7">
            <div class="tip-text">远近灯光交替2次</div>
          </el-collapse-item>
          <el-collapse-item title="4. 与机动车会车" name="8">
            <div class="tip-text">近光灯</div>
          </el-collapse-item>
          <el-collapse-item title="5. 通过交通信号灯控制的路口" name="9">
            <div class="tip-text">近光灯</div>
          </el-collapse-item>
          <el-collapse-item title="6. 超越前方车辆" name="10">
            <div class="tip-text">左转灯闪两下+远近灯光交替两次+右转灯闪两下+回近光灯</div>
          </el-collapse-item>
          <el-collapse-item title="7. 在照明不良的道路行驶" name="11">
            <div class="tip-text">远光灯</div>
          </el-collapse-item>
          <el-collapse-item title="7. 在无照明的道路行驶" name="12">
            <div class="tip-text">远光灯</div>
          </el-collapse-item>
          <el-collapse-item title="8. 在有路灯、照明良好的道路行驶" name="13">
            <div class="tip-text">近光灯</div>
          </el-collapse-item>
          <el-collapse-item title="9. 路边临时停车" name="14">
            <div class="tip-text">示廓灯+报警灯</div>
          </el-collapse-item>
          <el-collapse-item title="10. 请关闭所有灯光并起步" name="15">
            <div class="tip-text">关闭所有灯光</div>
          </el-collapse-item>
          <el-collapse-item title="11. 请起步" name="16">
            <div class="tip-text">打开左转向灯，等3秒（闪五下），挂一档，松手刹，起步</div>
          </el-collapse-item>
        </el-collapse>
      </div>


    </scroller>
  </div>
</template>

<script>

  import _00 from '../assets/voice/00.mp3';
  import introduction from '../assets/voice/introduction.mp3';
  import _01 from '../assets/voice/01.mp3';
  import _02 from '../assets/voice/02.mp3';

  import _03_01 from '../assets/voice/0301.mp3';
  import _03_02 from '../assets/voice/0302.mp3';
  import _03_03 from '../assets/voice/0303.mp3';
  import _03_04 from '../assets/voice/0304.mp3';
  import _03_05 from '../assets/voice/0305.mp3';
  import _04 from '../assets/voice/04.mp3';
  import _05 from '../assets/voice/05.mp3';
  import _06 from '../assets/voice/06.mp3';

  import _07_01 from '../assets/voice/0701.mp3';
  import _07_02 from '../assets/voice/0702.mp3';

  import _08 from '../assets/voice/08.mp3';
  import _09 from '../assets/voice/09.mp3';
  import _10 from '../assets/voice/10.mp3';
  import _11 from '../assets/voice/11.mp3';


  let _timout = 2500;
  export default {
    name: "Main",
    computed: {},
    inject: ['reload'],
    data() {
      return {
        dialogVisible: false,
        noDataText: "",
        part_btn_disabled: false,
        part_btn_loading: false,
        all_btn_disabled: false,
        all_btn_loading: false,
        all_title: "",
        partial_title: "",
        reset_title: "重新开始",
        start: false,
        d_00: _00,
        introduction: introduction,
        d_01: _01,
        d_09: _09,
        d_10: _10,
        d_11: _11,
        audioList: [],
        recordList: [
          {
            hasChild: false,
            data: _02
          },
          {
            hasChild: true,
            data: [
              _03_01,
              _03_02,
              _03_03,
              _03_04,
              _03_05
            ]
          },
          {
            hasChild: false,
            data: _04
          },
          {
            hasChild: false,
            data: _05
          },
          {
            hasChild: false,
            data: _06
          },
          {
            hasChild: true,
            data: [
              _07_01,
              _07_02
            ]
          },
          {
            hasChild: false,
            data: _08
          }
        ]
      }
    },
    updated() {
      console.log("数据更新完成")
    },
    methods: {
      reffor() {
        // const audios = document.getElementsByTagName("audio");
        // for (let i = 0; i < audios.length; i++) {
        //   const current = audios[i];
        //   current.pause();
        // }
        // this.reload();
        this.$refs.scrfor.finishPullToRefresh(); //刷新完毕关闭刷新的转圈圈
        // location.reload();
      },
      inffor() {
        this.$refs.scrfor.finishInfinite(true); //刷新完毕关闭刷新的转圈圈
      },
      moni(type) {
        document.getElementById("audioBox").innerText="";
        if (type === 'all') {
          this.all_btn_disabled = true;
          this.all_btn_loading = true;
          this.part_btn_disabled = true;
          this.audioList = [];
          this.recordList.forEach(item => {
            if (!item.hasChild) {
              this.audioList.push(item.data);
            } else {
              item.data.forEach(i => {
                this.audioList.push(i);
              })
            }
          })
          let count=6;
          while(count --){
            this.audioList.sort(() => {
              return 0.5 - Math.random()
            })
          }
        } else {
          this.all_btn_disabled = true;
          this.part_btn_disabled = true;
          this.part_btn_loading = true;
          this.recordList.forEach(item => {
            if (!item.hasChild) {
              this.audioList.push(item.data);
            } else {
              const randomData = item.data[Math.floor((Math.random() * item.data.length))];
              this.audioList.push(randomData);
            }
          })
          let count=6;
          while(count --){
            this.audioList.sort(() => {
              return 0.5 - Math.random()
            })
          }
        }
        this.audioList.unshift(this.d_11,this.d_10,this.d_09);
        this.audioList.push(this.d_01);
        this.audioList.push(this.introduction);
        this.audioList.push(this.d_00);
        console.log(this.audioList);
        let myAudio = new Audio();
        myAudio.controls = false;
        myAudio.preload = true;
        myAudio.controls = true;
        myAudio.src = this.audioList.pop();         //每次读数组最后一个元素
        myAudio.addEventListener('ended', playEndedHandler, false);
        myAudio.play();
        console.log(this.audioList.length);
        document.getElementById("audioBox").appendChild(myAudio);
        myAudio.loop = false;//禁止循环，否则无法触发ended事件
        const that = this;
        function playEndedHandler(){
          setTimeout(function(){
            const src=that.audioList.pop();
            myAudio.src = src;
            if(src === _06){
              _timout = 6500;
            }else{
              _timout = 3000;
            }
            myAudio.play();
            console.log(that.audioList.length);
            //只有一个元素时解除绑定
            if(!that.audioList.length){
              myAudio.removeEventListener('ended',playEndedHandler,false);
              that.all_btn_disabled = false;
              that.all_btn_loading = false;
              that.part_btn_loading = false;
              that.part_btn_disabled = false;
            }
          },_timout);
        }
      }

    }
  }
</script>

<style>

  .tip-text {
    font-weight: bold;
    color: red;
  }

  .custom-btn {
    width: 50%;
    height: 30%;
  }

  .no-data-text{
    display: none !important;
  }

  .loading-layer{
    display: none !important;
  }

</style>
